<template>
  <div class="home">
    <p>
      <i class="el-icon-s-promotion"></i>
      房产详情
    </p>
    <el-card class="page-wrap">
      <div class="main">
        <h1>{{ list.title }}</h1>
        <div class="pictuergroup">
          <div class="picture">
            <img :src="list.image" alt="" />
          </div>
          <div class="photo">
            <div>
              <img v-for="item in list.photos" :key="item" :src="item" alt="" />
            </div>
          </div>
        </div>
        <div class="info">
          {{ list.desc }}
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getHouse } from "@/api/realtor";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getHouse();
  },
  methods: {
    async getHouse() {
      const id = this.$route.query.id;
      this.list = await getHouse(id);
      console.log(this.list);
    },
  },
};
</script>
<style lang="less" scoped>
h2 {
  font-weight: normal;
  font-size: 28px;
  text-align: center;
}
.home {
  width: 60%;
  margin: 20px auto;
  p {
    color: #fba320;
    i {
      font-size: 24px;
    }
  }
  .page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    .main {
      width: 100%;
      height: 100%;
      .pictuergroup {
        display: flex;
        width: 100%;
        .picture {
          margin-right: 50px;
          width: 600px;
          img {
            width: 100%;
          }
        }
        .photo {
          display: flex;
          div {
            display: flex;
            flex-wrap: wrap;
            width: 400px;
            height: 310px;
            img {
              width: 48%;
              height: 48%;
              margin-right: 5px;
              margin-bottom: 5px;
            }
          }
        }
      }
      .info{
        margin-top: 20px;
        height: 200px;
      }
    }
  }
}
::v-deep .el-card__body {
  padding: 10px;
}
</style>
